
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="UTF-8">
		<title>layout布局页面</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js" ></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js" ></script>
		<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
		<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
		<!-- 引入ztree -->
		<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css"/>
        <title>JSP Page</title>
        <script type="text/javascript">
        $(function(){	
        //对zterr进行设置
        var zetting={
        	data:{
				simpleData:{
					enable:true//支持简单的json数据
				}
		 	},
		 	callback:{
		 		onClick:function(event, treeId, treeNode, clickFlag){
		 			var content = '<div style="width:100%;height:100%;overflow:hidden;">'
								+ '<iframe src="'
								+ treeNode.page
								+ '" data-options=iconCls:"icon-save" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
							
					var iconCls = '<div data-options='+treeNode.iconCls+'></div>'
						alert(treeNode.iconCls)
							// 没有page树形菜单，不打开选项卡
							if(treeNode.page != undefined && treeNode.page != ""){
								// 如果选项卡已经打开，选中 
								if($("#mytabs").tabs('exists',treeNode.name)){
									// 选中选项卡
									$("#mytabs").tabs('select',treeNode.name);
								}else{
									// 如果没有打开，添加选项卡 
									$("#mytabs").tabs('add',{
                                        title:treeNode.name,
										content: content,
										closable :true
									});
								}
							}
		 		}
		 	}
        }
        
        var zNode=[
			{id:1,pId:0,name:"基础设置",page:"https://www.zhangck.com",iconCls:"iconCls:'icon-save'"},
			{id:2,pId:0,name:"派送设置",page:"https://www.zhangck.com",iconCls:"iconCls:'icon-save'"},
			{id:3,pId:1,name:"数据设置",page:"https://www.zhangck.com",iconCls:"iconCls:'icon-save'"},
			{id:4,pId:1,name:"类型设置",page:"https://www.zhangck.com",iconCls:"iconCls:'icon-save'"},
			{id:5,pId:2,name:"派件设置",page:"./bgx.png"},
        	{id:6,pId:2,name:"取件设置",page:"https://www.baidu.com"}
        ];
        
				$.fn.zTree.init($("#baseMenu"), zetting, zNode);
        
        });
        </script>
    </head>
    <body>
    	
    	<body class="easyui-layout"> 

<div data-options="region:'north',title:'上午茶管理系统',split:true" style="height:100px;"></div> 

<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 

<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:180px;"></div> 

<div data-options="region:'west',title:'菜单导航',split:true" style="width:200px;">

<div  class="easyui-accordion" data-options="fit:'true'"> 
	<div data-options="title:'基础菜单'" id="zxc">
		<ul id="baseMenu" class="ztree"></ul>
	</div>	
	<div data-options="title:'系统菜单'">面板二</div>
</div> 
	
</div> 

<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
	<div id="mytabs" class="easyui-tabs" data-options="fit:'true',iconCls:'icon-save'">
		<div data-options="title:'选项面板一',closable:'true',iconCls:'icon-save'">选项面板一</div>
		<div data-options="title:'选项面板二',closable:'true'">选项面板二</div>
	</div>
</div> 

 	</body>
 	
 	
</html>